<template>
  <div id="cart">
    <div class="header">
      <div class="h_con main">
        <div class="logo">
          <div class="logo_con">
            <img src="./images/logo.png" alt="">
            <img src="./images/house.png" alt="">
          </div>
        </div>
        <div class="title">
          我的购物车
        </div>
      </div>
    </div>
    <div class="content">
      <div class="c_con main">
        <template>
          <div class="c_contop">
            <div class="xuanze"><input type="checkbox" @click="checkAll" :checked="watchSelect" style="cursor: pointer;">全选</div>
            <div class="name">商品名称</div>
            <div class="price">单价</div>
            <div class="num">数量</div>
            <div class="xiaoji">小计</div>
            <div class="caozuo">操作</div>
          </div>
          <div class="c_conmid" v-if="flag1">
            <div class="shangpin" v-for="(el,index) in cartGoods" :key="el.id">
              <input type="checkbox" class="shangpinxuanze" :checked="el.select" @click="selectChange(el.id,index)" style="cursor: pointer;">
              <img :src="el.url" alt="">
              <span class="shangpinming">{{el.title}}</span>
              <span class="shangpinjiage">{{el.price}}</span>
              <template>
                <el-input-number v-model="el.count" @change="handleChange(el.id,index)" :min="1" :max="100" label="描述文字" ref="inputRef"></el-input-number>
              </template>
              <span class="shangpinxiaoji" v-text="parseInt(el.price)*(el.count)" ref="priceRef"></span>
              <span class="danwei">元</span>
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/购物车/u967.svg" alt="" @click="deleteUsers(el.id)">
            </div>
          </div>
          <div class="c_conmid2" v-else>
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3074431641,2413950145&fm=26&gp=0.jpg" alt="">
          </div>
        </template>
        <div class="c_conbot">
          <span class="jixugouwu">继续购物</span>
          <div class="shu"></div>
          <span class="zonggong">共</span>
          <span v-text="length" style="color:red"></span>
          <span>件商品,</span>
          <span class="yixuan">已选择</span>
          <span style="color:red">{{getAllSelect}}</span>
           <span>件</span>
          <span class="heji">合计:</span>
          <span style="color:red">￥</span>
          <span style="color:red">{{getAllPrice}}</span>
          <div class="jiesuan">去结算</div>
        </div>
      </div>
    </div>
    <div class="content2">
      <div class="c2_con main">
        <div class="xianL"></div>
        <span>买了购物车中商品的人还买了</span>
        <div class="xianR"></div>
      </div>
    </div>
    <div class="content3">
      <div class="c3_con main">
        <div class="goods" v-for="item in goodsList" :key="item.id">
          <dl>
            <dt>
              <img :src="item.url">
            </dt>
            <dd>{{item.title}}</dd>
            <dd>{{item.price}}</dd>
            <dd class="pingjia">{{item.pingjia}}</dd>
            <div class="tijiao">加入购物车</div>
          </dl>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="f_con main">
        <img src="./images/u203.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data:()=>({
      length:'',
      flag1:true,
      goodsList:[],
      cartGoods:[]
    }),
  created(){
    this.getGoods(),
    this.getcartGoods()
  },
  methods: {
    handleChange(id,index) {
      // console.log(id,index)
      this.$nextTick(()=>{
        let num = this.$refs.inputRef[index].$data.currentValue
        // console.log(this.$refs.inputRef[index].$data.currentValue)
        // console.log(this.$refs.inputRef[index].$data)
        // console.log(num)
        // console.log(this.cartGoods[0].count)
        axios.put('http://10.41.152.13:3000/cartGoods/' + id , {
        "url": this.cartGoods[index].url,
        "title": this.cartGoods[index].title,
        "price": this.cartGoods[index].price,
        "select":this.cartGoods[index].select,
        "count": num,
        "xiaoji": this.cartGoods[index].xiaoji}).then(res=>{
          console.log(res)
        })
      })
    },
    selectChange(id,index){
      // console.log(this.cartGoods[0].select)
      this.$nextTick(()=>{
        let selected = this.cartGoods[index].select =!this.cartGoods[index].select
        let num1 = this.$refs.inputRef[index].$data.currentValue
        // console.log(selected)
        axios.put('http://10.41.152.13:3000/cartGoods/' + id , {
        "url": this.cartGoods[index].url,
        "title": this.cartGoods[index].title,
        "price": this.cartGoods[index].price,
        "select": selected,
        "count": num1,
        "xiaoji": this.cartGoods[index].xiaoji}).then(res=>{
          console.log(res)
        })
      })
    },
    async getGoods(){
      try {
        const {data} = await axios.get('http://10.41.152.13:3000/goods')
        this.goodsList = data
        // console.log(data)
      } catch (error) {
        console.log("错误")
      }
    },
    async getcartGoods(){
      try {
        const {data} = await axios.get('http://10.41.152.13:3000/cartGoods')
        this.cartGoods = data
        this.length = data.length
        if(this.length == 0){
          this.flag1 = false
        }
      } catch (error) {
        console.log("错误")
      }
    },
    async deleteUsers(id) {
      const res = await axios.delete('http://10.41.152.13:3000/cartGoods/' + id)
      this.getcartGoods()
    },
    checkAll(){
      this.$nextTick(()=>{
        
      })
		}
  },
  computed: {
    getAllPrice(){
      let c = 0  
      this.cartGoods.forEach(item=>{
        if(item.select == true){
          c+= item.count * parseInt(item.price)
        }
      })
      return c
    },
    watchSelect(){
      let flag = false
      let b = 0
      this.cartGoods.forEach(item=>{
        if(item.select==true){
          b++
        }
        console.log(b,this.cartGoods.length)
      })
      if(b==this.cartGoods.length){
        flag =true
      }
      console.log(flag)
      return flag
    },
    getAllSelect(){
      let a = 0
      this.cartGoods.forEach(item=>{
        if(item.select==true){
          a++
        }
      })
      return a
    }
  }
}
</script>

<style lang="less">
  *{margin: 0;padding: 0;}
  .main{
      width: 1226px;
      margin: 0 auto;
  }
  #cart{
      min-width: 1226px;
      background-color: #F2F2F2;
  }
  a{
      text-decoration:none;
  }
  input{
      outline: none;
  }
  li{
      list-style: none;
  }
  img{
      display: block;
  }
  .header{
    height: 120px;
    border-bottom: 2px solid #F59A23;
    background-color: #fff;
    .h_con{
      height: 120px;
      .logo{
        margin-top: 40px;
        height: 40px;
        width: 40px;
        overflow: hidden;
        float: left;
        &:hover .logo_con{
          transform: translateX(-60px);
          transition: all .5s;
          cursor: pointer;
        }
        .logo_con{
          height: 40px;
          width: 100px;
          transition: all .5s;
          img{
            height: 40px;
            width: 40px;
            &:nth-child(1){
              height: 30px;
              float: left;
              margin-top: 5px;
            }
            &:nth-child(2){
              float: right;
            }
          }
        }
      }
      .title{
        line-height: 120px;
        font-size: 30px;
        margin-left: 20px;
        float: left;
      }
    }
  }
  .content{
    margin-top: 30px;
    .c_con{
      .c_contop{
        height: 60px;
        background-color: #fff;
        text-align: center;
        line-height: 60px;
        input{
          height: 20px;
          width: 20px;
          position: absolute;
          top: 20px;
          left: 20px;
        }
        div{
          float: left;
        }
        .xuanze{
          position: relative;
          width: 120px;
        }
        .name{
          width: 400px;
        }
        .price{
          width: 100px;
          margin-left: 200px;
        }
        .num{
          width: 200px;
        }
        .xiaoji{
          width: 100px;
        }
        .caozuo{
          width: 100px;
        }
      }
      .c_conmid{
        .shangpin{
          background-color: #fff;
          position: relative;
          margin: 2px 0px;
          height: 154px;
          line-height: 154px;
          .shangpinxuanze{
            height: 20px;
            width: 20px;
            position: absolute;
            top: 67px;
            left: 20px;
          }
          img{
            height: 90px;
            width: 90px;
            &:nth-of-type(1){
              position: absolute;
              top: 30px;
              left: 145px;
            }
            &:nth-of-type(2){
              position: absolute;
              top: 74px;
              right: 50px;
              height: 9px;
              width: 9px;
              cursor: pointer;
            }
          }
          .el-input-number{
            position: absolute;
            top: 57px;
            right: 212px;
          }
          .shangpinming{
            margin-left: 280px;
          }
          .shangpinjiage{
            position: absolute;
            left: 755px;
          }
          .shangpinxiaoji{
            position: absolute;
            right: 140px;
            color: red;
          }
          .danwei{
            position: absolute;
            right: 120px;
            color: red;
          }
        }
      }
      .c_conmid2{
        img{
          margin: 30px auto 0px;
        }
      }
      .c_conbot{
        position: relative;
        margin-top: 30px;
        height: 60px;
        background-color: #fff;
        line-height: 60px;
        .jixugouwu{
          margin-left: 20px;
        }
        .zonggong{
          margin-left: 60px;
        }
        .heji{
          margin-left: 550px;
        }
        .shu{
          position: absolute;
          height: 20px;
          width: 1px;
          background-color: black;
          top: 20px;
          left: 111px;
        }
        .jiesuan{
          float: right;
          height: 60px;
          width: 200px;
          background-color: red;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .content2{
    height: 100px;
    .c2_con{
      height: 100px;
      // text-align: center;
      line-height: 100px;
      font-size: 28px;
      color: #AEAAAA;
      .xianL{
        height: 1px;
        width: 400px;
        background-color: #AEAAAA;
        float: left;
        margin-top: 49px;
      }
      .xianR{
        height: 1px;
        width: 400px;
        background-color: #AEAAAA;
        float: right;
        margin-top: 49px;
      }
      span{
        margin-left: 36px;
      }
    }
  }
  .content3{
    height: 650px;
    .c3_con{
      height: 610px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      .goods{
        height: 300px;
        width: 239px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        text-align: center;
        line-height: 35px;
        &:hover .pingjia{
          display: none;
        }
        &:hover .tijiao{
          display: block;
        }
        dl{
          dt{
            img{
              height: 150px;
              width: 150px;
              margin: 0 auto 20px;
            }
          }
          dd{
            &:nth-of-type(1){
              font-size: 16px;
            }
            &:nth-of-type(2){
              font-size: 14px;
              color: red;
            }
            &:nth-of-type(3){
              font-size: 12px;
              color: #AAAAAA;
            }
          }
          .tijiao{
            display: none;
            margin: 0 auto;
            border: 1px solid red;
            height: 30px;
            width: 100px;
            font-size: 14px;
            color: red;
            line-height: 30px;
            &:hover{
              color: white;
              background-color: red;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .footer{
    margin-top: 20px;
    .f_con{
      img{
        width: 1226px;
      }
    }
  }
</style>